<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="720px"
      :before-close="closeDialog"
      append-to-body
      title="修改事件"
  >


    <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">


      <el-form-item prop="eventTime" label="触发方式">
        <el-select v-model="form.eventTime" placeholder="请选择" @change="eventTimeChange">
          <el-option
              v-for="item in custEventTimes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="eventType" label="事件类型">
        <el-select v-model="form.eventType" placeholder="请选择" @change="eventTypeChange">
          <el-option
              v-for="item in eventTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="interId" label="事件接口" style="width: 550px"  v-if="form.eventType === 'AUTO_EXEC'">
        <el-input placeholder="请选择事件接口" disabled v-model="form.interName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="showInterDialog"></el-button>
        </el-input>
        <eventInterSelect ref="eventInterSelect" @success="selectInterEvent"/>
      </el-form-item>

      <el-form-item label="备案人员" style="height: 250px" prop="userConfigList" v-if="form.eventType === 'READ_NODE'">
        <el-table
            border
            size="small"
            ref="multipleTable"
            :data="form.userConfigList"
            tooltip-effect="dark"
            height="250px"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="approveUserValue"
              label="审批人配置"
              width="295">
            <template slot-scope="scope">{{ scope.row.approveUserValue }}</template>
          </el-table-column>
          <el-table-column
              prop="useDir"
              label="包含/排除"
              width="170">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.useDir"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="包含"
                  inactive-text="排除"
                  disabled
                  active-value="INCLUDE"
                  inactive-value="EXCLUDE">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="el-icon-bottom icon_class"@click="moveDown(scope.$index,scope.row)"/>
              <i class="el-icon-top icon_class" @click="moveUp(scope.$index,scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary"  size="mini" @click="addUserNode">添加</el-button>
          <el-button type="primary"  size="mini" @click="updateUserNode">修改</el-button>
          <el-button type="primary"  size="mini" @click="removeUserNode">删除</el-button>
        </div>
        <approvalUserAdd ref="approvalUserAdd" @success="addRecord"/>
        <approvalUserUpdate ref="approvalUserUpdate" @success="updateRecord"/>
      </el-form-item>

    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>

  </el-dialog>

</template>

<script>

import ApprovalUserAdd   from "../approval/ApprovalUserAdd.vue";
import ApprovalUserUpdate from '../approval/ApprovalUserUpdate.vue';
import EventInterSelect from './EventInterSelect.vue'
import {utils} from "@v/process/processEditor/utils/common";
export default {
  components:{
    ApprovalUserAdd,
    ApprovalUserUpdate,
    EventInterSelect
  },
  props:[
      'eventTimes',
      'processEventTimes',
      'eventTypes'
  ],
  data(){
    return {
      node:{},
      labelPosition:'left',
      dialogVisible: false,
      loading: false,
      form: this.defaultForm(),
      nowNodeUser:{},

      custEventTimes:[],
    }
  },
  created(){

  },
  methods:{
    defaultForm(){
      return {
        id:"",
        processId:"",
        type:"",
        nodeId:"",
        eventId:"",
        eventTime:"",
        eventType:"",
        interId:"",
        interName:"",
        userConfigList:[],
        inter:{},

      };
    },
    eventTimeChange(row){

    },
    eventTypeChange(row){

    },
    addUserNode(){
      this.$refs["approvalUserAdd"].showDialog({conditionRes:"NO"})
    },
    updateUserNode(){

    },
    removeUserNode(){

    },
    addRecord(row){
      this.form.userConfigList.push(row);
      this.analysisUserName(this.form.userConfigList);
    },
    showInterDialog(){
      this.$refs["eventInterSelect"].showDialog()
    },
    selectInterEvent(interRow){
      this.inter = interRow;
      this.form.interId = interRow.id;
      this.form.interName = interRow.interName;
    },
    updateRecord(row){

    },
    showDialog(row,node){
      this.form = utils.getCloneObj(row);
      this.node = node;
      if(this.node.type === 'process'){
        this.custEventTimes = this.processEventTimes;
      }else{
        this.custEventTimes = this.eventTimes;
      }
      this.form.nodeId = node.id;
      this.dialogVisible = true
    },
    closeDialog(){
      this.form = {};
      this.dialogVisible = false
      this.loading = false
    },
    submit(){
      this.$emit('success',this.form)
      this.dialogVisible = false
      this.loading = false
    },
    handleSelectionChange(row){
      this.nowNodeUser = row;
    },
    analysisUserName(userList) {
      if(userList == null){
        return;
      }
      userList.forEach(config => {
        if(config.useDir == null || config.useDir === ''){
          config.useDir = 'INCLUDE';
        }
        if(config.id != null && config.id !== ''){
          config.cid = config.id;
        }
        config.approveUserValue = config.approveUser;
        let userType = config.userType;
        if(userType === 'ACCOUNT'){
          config.approveUserValue = JSON.parse(config.approveUser).username;
        }else if(userType === 'VARIABLE'){
          config.approveUserValue = "变量用户: "+config.approveUserValue;
        }else if(userType === 'ALL_APPROVE'){
          config.approveUserValue = "所有流程审批人";
        }else if(userType === 'NODE_APPROVE'){
          config.approveUserValue = "节点审批人";
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>